<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>斗地主</title>
    <style>
        .all{
            width:1000px;
            margin:auto;
        }
        .first-line{
            overflow: hidden;

        }
        .first-line div{
            float:left;
            height: 700px;
        }
        .player1{
            width:300px;

        }
        .center{
            width:400px;
            position: relative;
            overflow: hidden;
        }
        .player2{
            width:300px;

            position: relative;
        }
        .second-line{
            width:600px;
            height:250px;
            margin:auto;
            overflow: hidden;
            position: relative;
        }
        .first-line .start-btn{
            width:200px;
            height:200px;
            -webkit-border-radius:100px;
            background: red;
            position: absolute;;
            top:50%;
            left:50%;
            margin-top: -100px;
            margin-left:-100px;
        }
        .start-btn h1{
            margin: 0;
            text-align: center;
            line-height: 200px;
            vertical-align: middle;
        }
        div.player-header{
            width:100px;
            height:100px;
            -webkit-border-radius:50px;
            border:1px solid red;
        }
        div.player-header h3{
            margin:0;
            padding:0;
            line-height: 100px;
            vertical-align: middle;
            text-align: center;

        }
        .player1 div.player-header{
            position:relative;
            top:50%;
            margin-top:-50px;
        }
        .player2 div.player-header{
            position:absolute;;
            left:100%;
            top:50%;
            margin-top:-50px;
            margin-left:-100px;
        }
        .second-line div.player-header{

            position:absolute;;
            left:50%;
            top:100%;
            margin-left:-50px;
            margin-top:-100px;
        }
        ul{
            padding:0;
            margin:0;
            overflow: hidden;
        }
        ul.player2-puke{
            float:right;
            position: absolute;
            right:100px;
        }
        ul li{
            list-style-type: none;
        }
        ul li:not(:first-of-type){
            margin-top:-120px;
        }
        ul.player3-puke li{
            float:left;
        }
        ul.player3-puke li:not(:first-of-type){

            margin-top:0;
            float:left;
            margin-left:-80px;
        }
        .center ul.other-puke li{
            float:left;
            margin-top:0;
            position: relative;

        }
    </style>

</head>
<body>
    <div class="all">
        <div class="first-line">
            <div class="player1">
                <div class="player-header">
                    <h3>玩家一</h3>
                </div>
                <ul class="player1-puke">
                </ul>
            </div>
            <div class="center">
                <ul class="other-puke">
                </ul>
                <div class="start-btn">
                    <h1>开始</h1>
                </div>
            </div>
            <div class="player2">
                <ul class="player2-puke">
                </ul>
                <div class="player-header">
                    <h3>玩家二</h3>
                </div>
            </div>
        </div>
        <div class="second-line">
            <ul class="player3-puke">
            </ul>
            <div class="player-header">
                <h3>玩家三</h3>
            </div>
        </div>
    </div>
    <script>
        class Puke{
            constructor(point,type,src){
                this.point = point;
                this.type = type;
                this.src = src;
            }
        }
        function sort(ary){
            ary.sort(function(a,b){
                if(a.point == b.point){
                    return a.type - b.type;
                }
                return a.point - b.point;
            });
        }
        function render(ary,node){
            let str = "";
            for(let i = 0;i < ary.length;i++){
                str += `<li><img src="${ary[i].src}"></li>`;
            }
            node.innerHTML = str;
            
        }
        function sendCard(){
            let pukeAry = [];
            let player1Puke = document.querySelector(".player1-puke");
            let player2Puke = document.querySelector(".player2-puke");
            let player3Puke = document.querySelector(".player3-puke");
            let otherPuke = document.querySelector(".other-puke");
            // 1.创建54张扑克牌对象
            for(let i = 3;i <= 15;i++){
                for(let j = 1;j <= 4;j++){
                    pukeAry.push(new Puke(i,j,`../images/puke/${i}_${j}.jpg`));
                }
            }
            // 大小王
            pukeAry.push(new Puke(16,1,`../images/puke/${16}_${1}.jpg`));
            pukeAry.push(new Puke(17,1,`../images/puke/${17}_${1}.jpg`));
            

            // 2.洗牌
            for(let i = 0;i < pukeAry.length;i++){
                let rand = parseInt(Math.random() * pukeAry.length)
                // let temp = pukeAry[i];
                // pukeAry[i] = pukeAry[rand];
                // pukeAry[rand] = temp;
                [pukeAry[i],pukeAry[rand]] = [pukeAry[rand],pukeAry[i]]
            }

            // 3.分牌
            let player1 = pukeAry.slice(0,17);
            let player2 = pukeAry.slice(17,34);
            let player3 = pukeAry.slice(34,51);
            let base = pukeAry.slice(51,54);

            // 4.排序
            sort(player1);
            sort(player2);
            sort(player3);
            sort(base);

            // 5.渲染扑克牌
            render(player1,player1Puke);
            render(player2,player2Puke);
            render(player3,player3Puke);
            render(base,otherPuke);
            

        }
        sendCard();
        document.querySelector(".start-btn").onclick = function(){
            sendCard();
        };
    </script>
</body>
</html>